import React, { Component } from "react";
import { Input, Cascader, Button, Modal } from "antd";
import PicturesWall from "../../components/Pictures-wall";
import Avatar from "../../components/avatar";
import "./index.less";
import img from "../../assets/images/logo.png";
const { TextArea } = Input;

export default class Configurat extends Component {
  state = { visible: true };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  hideModal = () => {
    this.setState({
      visible: false
    });
  };
  render() {
    const options = [
      {
        value: "zhejiang",
        label: "Zhejiang",
        children: [
          {
            value: "hangzhou",
            label: "Hangzhou",
            children: [
              {
                value: "xihu",
                label: "West Lake"
              }
            ]
          }
        ]
      },
      {
        value: "jiangsu",
        label: "Jiangsu",
        children: [
          {
            value: "nanjing",
            label: "Nanjing",
            children: [
              {
                value: "zhonghuamen",
                label: "Zhong Hua Men"
              }
            ]
          }
        ]
      }
    ];
    function onChange(value) {
      console.log(value);
    }
    return (
      <div className="config">
        {/* 店铺名称 */}
        <div className="config-top">
          {/* 店铺名称 */}
          <div className="area">
            <div className="typeof">店铺名称：</div>
            {/* <div className="updata-part">
              <span>良品铺</span>
              <span className="updata">修改</span>
            </div> */}
            <div className="updata-part">
              <div>
                <Input placeholder="良品铺" style={{ width: 200 }} />
                <span className="updata">确定</span>
                <span className="updata">取消</span>
              </div>
              <div className="tip">店铺名称应尽量简洁易记，建议15字以内</div>
            </div>
          </div>
          {/* 店铺英文名 */}
          <div className="area">
            <div className="typeof">店铺英文名：</div>
            {/* <div>
              <span>LAINGPIN</span>
              <span className="updata">修改</span>
            </div> */}
            <div className="updata-part">
              <div>
                <Input placeholder="LAINGPIN" style={{ width: 200 }} />
                <span className="updata">确定</span>
                <span className="updata">取消</span>
              </div>
              <div className="tip">店铺名称应尽量简洁易记，建议15字以内</div>
            </div>
          </div>
          {/* 主营类目 */}
          <div className="area">
            <span className="typeof">主营类目：</span>
            <span>休闲零食</span>
            <span className="updata">修改</span>
          </div>
          <div className="area">
            <span className="typeof">联系邮箱：</span>
            <span>13567899876@163.com</span>
            <span className="updata">修改</span>
          </div>
          <div className="area">
            <span className="typeof">创建日期：</span>
            <span>2019-07-30 16:34:56</span>
          </div>
          <div className="area">
            <span className="typeof">店铺 logo：</span>
            <img src={img} alt="" />
            <span className="updata" onClick={this.showModal}>
              修改
            </span>
          </div>
          <div className="area">
            <span className="typeof store-profile">店铺简介：</span>
            <TextArea style={{ width: 350, height: 60 }} rows={4} />
          </div>
          <div className="area">
            <span className="typeof">负责人手机号：</span>
            <span>17609878884</span>
            <span className="updata">更换</span>
          </div>
        </div>
        {/* 客服电话： */}
        <div className="service-tel">
          <div>
            <span>客服电话：</span>
            <Input placeholder="区号" style={{ width: 60 }} /> -{" "}
            <Input placeholder="输入手机号码不填区号" style={{ width: 200 }} />
          </div>
          {/* 联系地址 */}
          <div className="address">
            <span>联系地址：</span>
            <Cascader
              defaultValue={["zhejiang", "hangzhou", "xihu"]}
              options={options}
              onChange={onChange}
              style={{ width: 275 }}
            />
          </div>
          {/* 搜索地图 */}
          <div>
            <Input placeholder="浙江省" className="search-map" />
            <Button>搜索地图</Button>
          </div>
        </div>
        {/* 资质图片 */}
        <div className="picture-qualificat">
          <div className="title">资质图片：</div>
          <PicturesWall />
        </div>
        <Modal
          title="上传logo"
          width="750px"
          style={{ top: 200 }}
          visible={this.state.visible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="生成"
          cancelText="取消"
        >
          <div className="logo-model">
            <div className="tip">
              <div>图片不允许涉及政治敏感与色情</div>
              <div>图片大小不可大于1M</div>
            </div>
            <div className="upload-img">
              <div className="img">
                <Avatar />
              </div>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}
